//状态提升，小案例
import {Component,useState} from "react";

class Fahrenheit extends Component{
    render(){
        const {value,onChange} = this.props;
        let change = (e)=>{
            let temper = (Number(e.target.value)-32)*5/9;
            onChange(Number(temper));
        }
        return(
            <div>
                <label>华氏温度：</label>
                <input type="text" value={value*9/5+32} onChange={change}/>
            </div>
        )
    }
}

function Celsius(props){
    let {value,onChange} = props;
    let change = (e)=>{
        onChange(e.target.value)
    }
    return(
        <div>
            <label>摄氏温度：</label>
            <input type="text" value={value} onChange={change}/>
        </div>
    )
}

function DemoA(){
    const [temper,setTemper] = useState(0);//就是被我们提升的状态
    return(
        <div>
            <Fahrenheit value={temper} onChange={val=>setTemper(val)}></Fahrenheit>
            <hr />
            <Celsius value={temper} onChange={val=>setTemper(val)}></Celsius>
        </div>
    )
}

export default DemoA;